<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>6.认识一下VueComponent</title>
		<style>
			.car{
				padding: 20px;
				margin: 20px;
				background-color: skyblue;
			}
			.app{
				padding: 30px;
				background-color: gray;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				认识VueComponent:
						1.Car组件也好，App组件也好，他们本质是一个构造函数，名为：VueComponent。

						2.VueComponent这个构造函数，不是程序员定义的，也不是引入了vue.js就有的，而是Vue.extend()生成的。

						3.Vue.extend()每次生成的都是一个【全新的】VueComponent构造函数！！！（以后会很有用）

						4.我们只需要写 <Car></Car> 或 <Car/> Vue就会帮我们执行： new VueComponent(options)。

						5.关于this的指向：
								(1).组件配置中（Vue.extend(options)）：
										data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
										它们的this均是【VueComponent实例对象】——vc
								(2).new Vue(options)配置中：
										data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
										它们的this均是【Vue实例对象】—— vm
								备注：vc其实就是一个小型的vm，只不过与vm有点小不同，例如：vm可以拥有el，而vc不能拥有。

						6.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

		 -->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			// 定义一个汽车组件
			let Car = Vue.extend({
				name:'Car',
				template:`
					<div class="car">
						<h1>汽车信息</h1>
						<h3>名字：{{name}}</h3>
						<h3>价格：{{price}}</h3>
						<h3>颜色：{{color}}</h3>
						<button @click="showInfo">提示信息（Car中的按钮）</button>
					</div>
				`,
				data(){
					return {
						name:'奔驰C63',
						price:'100W',
						color:'灰色'
					}
				},
				methods:{
					showInfo(){
						console.log(this) //此处的this是Car这个组件的实例对象 —— vc
						// alert(`老师，我答应你以后我混好了，我给你买：${this.name}，${this.price}，${this.color}`)
					}
				}
			})

			// 定义一个App组件
			let App = Vue.extend({
				name:'App',
				components:{Car},
				template:`
					<div class="app">
						<Car/>
						<Car/>
						<Car/>
						<button @click="showThis">点我输出一下this（App中的按钮）</button>
					</div>
				`,
				methods:{
					showThis(){
						console.log(this)
					}
				}
			})

			// console.log(1,Car)
			// console.log(2,App)
			// console.log(Car === App)

			//创建一个vm
			new Vue({
				el:'#demo',
				components:{App},
				template:`<App/>`
			})
			
			/* 
				一个小测验，上述代码中：
						1.有几个Vue构造函数   ——   1
						2.有几个VueComponent构造函数   ——   2
						3.有几个vm   ——   1
						4.有几个vc   ——   4
			*/
		</script>
	</body>
</html>